<template>
  <div>
    <div style="margin: 10px;text-align: center;">
      <el-button
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        size="small"
        @click="handleCreate"
      >
        新增大B端
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        label="操作"
        align="center"
        width="210"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            type="success"
            size="mini"
            plain
            @click="bigbInfo(row)"
          >
            跟进
          </el-button>
          <el-button
            type="primary"
            size="mini"
            plain
            @click="handleUpdate(row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            plain
            @click="handleDelete(row.id, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="id" label="ID" align="center" width="60" /> -->
      <el-table-column
        prop="bname"
        label="大B端全称"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="address"
        label="大B端地址"
        align="center"
        show-overflow-tooltip
      />
      <!-- <el-table-column
        label="大B端主页"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-link
            :href="'/#/show/bigb/' + row.id"
            target="_blank"
            type="primary"
          >大B端主页</el-link>
        </template>
      </el-table-column> -->
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" style="margin-top: -120px">
      <el-form
        ref="dataForm"
        :model="bigbObj"
        label-width="110px"
        style="margin-right: 30px"
        :rules="rules"
      >
        <el-form-item label="大B端全称" prop="bname">
          <el-input v-model="bigbObj.bname" />
        </el-form-item>
        <el-form-item v-show="title == '编辑'" label="大B端地址">
          <el-input v-model="bigbObj.address" />
        </el-form-item>
        <el-form-item v-show="title == '新增'" label="大B端地址">
          <div style="display: grid">
            <el-cascader
              v-model="selectedOptions"
              :options="areaSelectData"
              style="width: 260px"
              :filterable="true"
              size="medium"
              @change="locationHandleChange"
            />
            <el-input
              v-model="addr2"
              autocomplete="off"
              style="width: 76%; margintop: 10px"
              placeholder="街道门牌号"
            />
          </div>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" style="margin-top: -30px;">
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="updateData()"> 确定 </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="bigbObj.sname"
      :visible.sync="dialogFormVisible2"
      style="margin-top: -100px;"
    >
      <el-form
        label-width="0px"
        style="margin-left: 0px"
      >
        <el-form-item style="margin-bottom: 0px">
          <div>跟进信息</div>
          <el-row :gutter="20">
            <el-col :span="18" :offset="0">
              <el-input v-model="track" />
            </el-col>
            <el-col :span="6" :offset="0">
              <el-button type="primary" @click="handleTags">添加</el-button>
            </el-col>
          </el-row>
          <p v-html="bigbObj.track" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible2 = false"> 离开 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBigbs, addBigb, editBigb, delBigb, updateBigbTrack } from '@/api/txs'
import { regionData, codeToText } from 'element-china-area-data'
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'

export default {
  data () {
    return {
      location: '四川省成都市武侯区',
      selectedOptions: ['51', '5101', '510107'],
      addr2: '',
      areaSelectData: regionData,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      track: '',

      bigbObj: {},
      title: '',
      list: null,
      listLoading: true,
      rules: {
        bname: [{ required: true, message: '必填项', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created () {
    this.fetchData()
  },
  methods: {
    locationHandleChange () {
      this.location =
        codeToText[this.selectedOptions[0]] +
        codeToText[this.selectedOptions[1]] +
        codeToText[this.selectedOptions[2]]
    },
    fetchData () {
      this.listLoading = true
      getBigbs().then(res => {
        this.list = res.data.data
        this.listLoading = false
      })
    },
    handleCreate () {
      this.title = '新增'
      this.bigbObj = this.$options.data().bigbObj
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleUpdate (row) {
      this.title = '编辑'
      this.bigbObj = Object.assign({}, row)
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.bigbObj)
          if (this.title === '新增') {
            tempData.address = this.location + '-' + this.addr2
            addBigb(tempData).then(res => {
              const d = res.data.data
              this.list.unshift(d)
              this.dialogFormVisible = false
              this.$notify({
                title: res.data.message,
                message: res.data.status,
                type: 'success',
                duration: 2000
              })
            })
          } else if (this.title === '编辑') {
            editBigb(tempData).then(() => {
              const index = this.list.findIndex(v => v.id === this.bigbObj.id)
              this.list.splice(index, 1, tempData)
              this.dialogFormVisible = false
              this.$notify({
                title: 'Success',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        }
      })
    },
    bigbInfo (row) {
      this.dialogFormVisible2 = true
      this.bigbObj = Object.assign({}, row)
    },
    handleDelete (id, index) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delBigb(id).then(() => {
            this.$notify({
              title: 'Success',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
          this.list.splice(index, 1)
        })
        .catch(() => {})
    },
    handleTags() {
      let track = ''
      track = dayjs(new Date()).format('YY-MM-DD') + ' ' + this.name + '：' + this.track
      if (this.bigbObj.track && this.bigbObj.track.length > 0) {
        this.bigbObj.track = track + '<br>' + this.bigbObj.track
      } else {
        this.bigbObj.track = track
      }

      updateBigbTrack(this.bigbObj.id, track).then(() => {
        this.$notify({
          title: 'Success',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
      })
      const index = this.list.findIndex(v => v.id === this.bigbObj.id)
      this.list.splice(index, 1, this.bigbObj)
    }
  }
}
</script>
